<!DOCTYPE html>
<html>
<head>
<link href="../css/main.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="../js/main.js"></script>
<link rel="stylesheet" href="../css/jquery.mCustomScrollbar.css">
<script src="../js/jquery.mCustomScrollbar.concat.min.js"></script>
<meta charset="UTF-8">
<title>注册</title>
<script>
        $(function () {
        	$(".content_list").mCustomScrollbar();
          $(".keep").click(function () {
              var name=$(".input_name").val()
              var password=$(".input_name1").val()
              var age=$(".input_name2").val()
              var sex=$("input:radio:checked").val()
              if(sex=='0'){
                  sex="女"
              }else{
                  sex="男"
              }
              var hobby=[];
              var hobby1=$(".form_hobby").find("input:eq(0)").prop("checked")
              console.log(hobby1)
              if(hobby1==true){
                  hobby.push("足球")
              }
              var hobby2=$(".form_hobby").find("input:eq(1)").prop("checked")
              if(hobby2==true){
                  hobby.push("看剧")
              }
              var hobby3=$(".form_hobby").find("input:eq(2)").prop("checked")
              if(hobby3==true){
                  hobby.push("睡觉")
              }
              var hobby4=$(".form_hobby").find("input:eq(3)").prop("checked")
              if(hobby4==true) {
                  hobby.push("吃饭")
              }
              var address=$("#address option:selected").val()
              if(address==0){
                  address="南京"
              }
              else if(address==1){
                  address="上海"
              }
              else if(address==2){
                  address="北京"
              }
              else if(address==3){
                  address="广州"
              }
              else if(address==4){
                  address="深圳"
              }
              else if(address==5){
                  address="武汉"
              }
              else if(address==6){
                  address="南通"
              }
              var param_data={
                  'name':name,
                  'password':password,
                  'age':age,
                  'hobby':hobby,
                  'sex':sex,
                  'address':address
              };
              console.log(JSON.stringify(param_data))
             $.ajax({
                 type:"POST",
                 url:"http://localhost:8080/register_ssm2/AddInfo.action",
                 data:JSON.stringify(param_data),
                 dataType:"json",
                 contentType:"application/json;charset=utf-8",
                 async:false,
                 success:function(da){
                     if(da.code==0){
                         alert("添加成功！");
                     }else{
                         alert("添加失败！");
                     }
                 }
             });
          });
          $(".show").click(function(){
        	  $(".content_list ul").find("li").eq(0).siblings().remove()
        	  $.ajax({
             	 type:"POST",
             	 url:"http://localhost:8080/register_ssm2/getAllInfo.action",
             	 contentType:"application/json;charset=utf-8",
             	 dataType:"json",
             	 async:false,
             	 success:function(data){
             		 var $infoitem=$(".content_list ul");
                     $.each(data,function (index, ele) {
                        var $item=create(index,ele);
                        $infoitem.append($item);
                    }); 
                     
             	 }
               }); 
          });
         function create(index,ele) {
              $item=$(" <li class=\"list_title\">\n" +
                      "                        <div class=\"list_name\">"+ele.name+"</div>\n" +
                      "                        <div class=\"list_password\">"+ele.password+"</div>\n" +
                      "                        <div class=\"list_age\">"+ele.age+"</div>\n" +
                      "                        <div class=\"list_sex\">"+ele.sex+"</div>\n" +
                      "                        <div class=\"list_hobby\">"+ele.hobby+"</div>\n" +
                      "                        <div class=\"list_address\">"+ele.address+"</div>\n" +
                      "                    </li>");
              return $item;
          } 
        });
    </script>
</head>
<body>
	<div class="header">
    <h1 class="logo"><a href="#">注册</a></h1>
</div>
<div class="content">
    <div class="content_in">
        <div class="content_left">
            <div class="content_list" data-mcs-theme="minimal-dark">
                <ul>
                    <li class="list_title">
                        <div class="list_name">姓名</div>
                        <div class="list_password">密码</div>
                        <div class="list_age">年龄</div>
                        <div class="list_sex">性别</div>
                        <div class="list_hobby">爱好</div>
                        <div class="list_address">地址</div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="content_right">
            
            <div class="content_form" >
                <div class="form_title"><h2>注册表</h2></div>
                <div class="form_name"><span>*</span>姓名：
                   <input type="text" name="name" class="input_name">
                </div>
                <div class="form_password"><span>*</span>密码：
                    <input type="password" name="password" class="input_name1" >
                </div>
                <div class="form_age"><span>*</span>年龄：
                    <input type="text" name="age" class="input_name2" >
                </div>
                <div class="form_sex">性别：
                    <input type="radio" name="sex" value="男" checked="checked">男
                    <input type="radio" name="sex" value="女">女
                </div>
                <div class="form_hobby">爱好：
                    <input type="checkbox" name="hobby" value="足球" checked="checked"/>足球
                    <input type="checkbox" name="hobby" value="看剧"/>看剧
                    <input type="checkbox" name="hobby" value="睡觉" />睡觉
                    <input type="checkbox" name="hobby" value="吃饭" />吃饭
                    
                </div>
                <div class="form_address">地址：
                    <select name="address" id="address">
                        <option value="0">南京</option>
                        <option value="1">上海</option>
                        <option value="2">北京</option>
                        <option value="3">广州</option>
                        <option value="4">深圳</option>
                        <option value="5">武汉</option>
                        <option value="6">南通</option>
                    </select>
                </div>
                <div class="form_submit">
                    <input type="button" value="保存" class="keep">
                    <input type="button" value="显示" class="show">
                </div>
            </div>
            
        </div>
    </div>
</div>
<div class="mask_bg"></div>
<div class="mask"></div>
</body>
</html>